<template>
  <div class="wrapper">
    <common-header :title="title"
                   class="header"></common-header>
    <common-scroll class="detail-scroll"
                   ref="scroll"
                   v-if="swiperList.length">
      <div class="content">
        <detail-swiper :list="swiperList"
                       @load="loadDataed"
                       @like="handleLike"
                       @isShare="handleShare"
                       :like="like"
                       :name="shopName"></detail-swiper>
        <detail-evaluate :evaluate="evaluate"
                         :isShow="isShow"></detail-evaluate>
        <detail-info :info="info"></detail-info>
        <detail-discounts :discounts="discounts"></detail-discounts>
        <detail-link :link="link"></detail-link>
        <detail-vedio :video="video"></detail-vedio>
        <detail-describe :desc="desc"></detail-describe>
      </div>
    </common-scroll>
    <detail-order v-show="swiperList.length"
                  :tel="tel"
                  :name="shopName.name"></detail-order>
    <common-gallery class="img-swiper"
                    v-show="this.isShow"></common-gallery>
    <common-loading v-show="!swiperList.length"></common-loading>
    <router-view :list="evaluate"></router-view>
    <div class="guide"
         v-show="share"
         @click="handleHide">
      <i class="iconfont icon">&#xe679;</i>
    </div>
  </div>
</template>

<script>
import CommonScroll from 'common/scroll/Scroll'
import CommonGallery from 'common/gallery/Gallery'
import CommonHeader from 'common/header/Header'
import DetailSwiper from './components/swiper'
import DetailEvaluate from './components/Evaluate'
import DetailInfo from './components/Info'
import DetailDiscounts from './components/Discounts'
import DetailDescribe from './components/Describe'
import DetailOrder from './components/Order'
import CommonLoading from 'common/loading/Loading'
import DetailLink from './components/Link'
import DetailVedio from './components/video'
import { mapState } from 'vuex'
import { storageType } from '@/assets/js/storage'
import {
  Toast
} from 'vant'

export default {
  name: 'Detail',
  components: {
    CommonHeader,
    DetailSwiper,
    CommonScroll,
    CommonLoading,
    DetailEvaluate,
    CommonGallery,
    DetailInfo,
    DetailDiscounts,
    DetailDescribe,
    DetailOrder,
    DetailLink,
    DetailVedio
  },
  props: {
    title: {
      type: String,
      default: '商家首页'
    }
  },
  data () {
    return {
      swiperList: {},
      evaluate: {},
      shopName: {},
      currentRoute: 'Detail',
      info: {},
      link: [],
      video: {},
      desc: '',
      discounts: [],
      tel: '',
      like: false,
      share: false
    }
  },
  methods: {
    getDetailData () {
      const id = this.$route.params.id
      this.$api.detail.detailData({ seller_id: id })
        .then(this.getDetailDataSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    getDetailDataSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.swiperList = data.album
        this.shopName.name = data.shop_name
        this.shopName.title = data.shop_title
        this.shopName.imgUrl = data.cover_pic
        this.evaluate.score = data.composite_score
        this.evaluate.comments = data.comment
        this.evaluate.commentsTotal = data.comment_total
        this.info.address = `${data.province}${data.city}市${data.district}${data.address}`
        this.info.tel = data.shop_tel
        this.link = data.link
        this.video.url = data.video
        this.video.img = data.cover_pic
        this.desc = data.desc
        this.discounts = data.coupon
        this.tel = data.shop_tel
        this.shopName.looks = data.looks
        this.shopName.address = `${data.district}${data.address}`
        this.shopName.id = data.id
        this.shopName.distance = data.discounts
      }
    },
    loadDataed () {
      if (!this.checkLoad) {
        this.$refs.scroll.refresh()
      }
      this.checkLoad = true
    },
    browsingHistory (type) {
      const id = this.shopName.id
      const coverPic = this.shopName.imgUrl
      const compositeScore = this.evaluate.score
      const looks = this.shopName.looks
      const address = this.shopName.address
      let distance = this.shopName.distance
      if (distance === '') {
        distance = 0
      }
      const href = this.$route.path
      storageType.apply(this, [type, id, coverPic, compositeScore, looks, address, distance, href])
    },
    handleLike () {
      this.like = !this.like
      if (this.like) {
        this.browsingHistory('collectHistory')
        Toast({
          message: '收藏成功',
          duration: 1000,
          forbidClick: true
        })
      } else {
        const id = this.$route.params.id
        const collectHistory = JSON.parse(this.$localStorage.get('collectHistory'))
        collectHistory.map((item, index) => {
          if (parseInt(item.id) === parseInt(id)) {
            collectHistory.splice(index, 1)
          }
        })
        this.$localStorage.set('collectHistory', JSON.stringify(collectHistory))
        Toast({
          message: '取消收藏',
          duration: 1000,
          forbidClick: true
        })
      }
    },
    postCollectList () {
      const id = this.$route.params.id
      this.$api.collect.postCollect({ seller_id: id })
        .then((res) => {

        }).catch((e) => {
          console.log(e)
        })
    },
    deleteCollectList () {
      const ids = this.$route.params.id
      this.$api.collect.deleteCollect({ ids })
        .then(this.deleteCollectSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    deleteCollectSucc (res) {
      res = res.data
      if (res.data && res.code === this.$api.CODE_OK) {
        return false
      }
    },
    handleShare () {
      this.share = true
    },
    handleHide () {
      this.share = false
    }
  },
  computed: {
    ...mapState({
      isShow: 'isShow'
    })
  },
  watch: {
    link () {
      const id = this.$route.params.id
      this.browsingHistory('browsingHistory')
      const collectHistory = JSON.parse(this.$localStorage.get('collectHistory'))
      if (collectHistory != null) {
        collectHistory.map((item) => {
          if (parseInt(item.id) === parseInt(id)) {
            this.like = true
          }
        })
      }
    },
    like (flag) {
      const loginStatus = this.$localStorage.get('loginStatus')
      if (!flag && loginStatus != null) {
        this.deleteCollectList()
      }
    }
  },
  created () {
    this.getDetailData()
  },
  beforeRouteLeave (to, from, next) {
    const flag = this.like
    const loginStatus = this.$localStorage.get('loginStatus')
    if (flag && loginStatus != null) {
      this.postCollectList()
    }
    next()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'

.wrapper
  touch-action none

  .detail-scroll
    background-color $bgc
    top 100px

  .content
    padding-bottom 104px

  box-sizing border-box

  .header
    background-color $bgcWh

  .guide
    position fixed
    top 0
    bottom 0
    right 0
    left 0
    z-index 10000
    background-color rgba(0, 0, 0, 0.5)
    padding-left 20px
    padding-right 20px
    box-sizing border-box
    text-align right

    i
      font-size 100px
      color $whiteFzClor
</style>
